<script setup>
import { ref, onMounted, computed } from "vue";
import { getPostInfoService, getTopicsInfoService } from "@/api/info";
import { useDataFormatter } from "@/stores";

const {
  data: postInfo,
  formattedData: formattedPosts,
  loadData: loadPosts,
} = useDataFormatter();

const {
  data: topicsInfo,
  formattedData: formattedTopics,
  loadData: loadTopics,
} = useDataFormatter();

onMounted(() => {
  loadPosts(() => getPostInfoService(3)); // 获取3条数据
  loadTopics(() => getTopicsInfoService(2)); // 获取2条数据
});
</script>

<template>
  <!-- 英雄区域 -->
  <div class="hero">
    <div class="container">
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">
            <span>开启你的</span>
            <span class="highlight">星露谷农场之旅</span>
          </h1>
          <p class="hero-description">
            在这里，你将找到最全面的游戏攻略、最活跃的玩家社区，以及最详细的游戏资料。让我们一起探索星露谷的无限可能！
          </p>
          <div class="hero-cta">
            <router-link to="/guides" class="cta-button">开始探索</router-link>
          </div>
        </div>
      </div>
    </div>
    <img
      class="hero-image"
      src="/星露谷物语.png"
      alt="星露谷游戏截图"
    />
  </div>

  <!-- 热门攻略 -->
  <div class="guides-section">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">热门攻略</h2>
        <p class="section-description">精选最实用的游戏攻略，助你成为星露谷大师</p>
      </div>
      <div class="guides-grid">
        <!-- 攻略卡片 1 -->
        <div class="guide-card" v-for="(item, index) in formattedPosts" :key="item.id">
          <div class="guide-content">
            <div class="guide-author">
              <img class="author-avatar" :src="item.user.avatar_url" alt="作者头像" />
              <div class="author-info">
                <p class="author-name">{{ item.user.username }}</p>
                <div class="post-date">
                  <time :datetime="item.formattedDate">{{ item.formattedDate }}</time>
                </div>
              </div>
            </div>
            <router-link :to="`/guides/article/${item.post_id}`" class="guide-title">
              {{ item.title }}
            </router-link>
            <p class="guide-excerpt">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 最新讨论 -->
  <div class="discussions-section">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">最新讨论</h2>
        <p class="section-description">加入社区讨论，分享你的游戏心得</p>
      </div>
      <div class="discussions-grid">
        <!-- 讨论卡片 1 -->
        <div
          class="discussion-card"
          v-for="(item, index) in formattedTopics"
          :key="index"
        >
          <div class="discussion-content">
            <div class="guide-author">
              <img class="author-avatar" :src="item.user.avatar_url" alt="用户头像" />
              <div class="author-info">
                <p class="author-name">{{ item.user.username }}</p>
                <div class="post-date">
                  <time datetime="2024-03-20">{{ item.formattedDate }}</time>
                </div>
              </div>
            </div>
            <a :href="item.id" class="guide-title"> {{ item.title }} </a>
            <p class="guide-excerpt">
              {{ item.content }}
            </p>
            <div class="discussion-stats">
              <span>12 回复</span>
              <span class="stats-separator">•</span>
              <span>{{ item.view_count }} 浏览</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
